import Image from 'next/image'
import React from 'react'
import styles from './mapcontroller.module.scss'
import { useEmberboxStore } from '../../hooks/store'
import { PickerView } from 'antd-mobile'
const basicColumns = [
    [
        { label: 'F1', value: '1' },
        { label: 'F2', value: '2' },
        { label: 'F3', value: '3' },
        { label: 'F4', value: '4' },
        { label: 'F5', value: '5' },
        { label: 'F6', value: '6' },
        { label: 'F7', value: '7' },

    ],
]
const SliderSelect = () => {


    return <>
        <PickerView columns={basicColumns}
            className='theme_picker_slider_select'
            style={{
                '--height': '100%',
                '--item-height': '2rem',
            }}
        />
    </>
}


const index = () => {

    let store: any = useEmberboxStore()

    let resetLocation = () => {
        store.emberbox?.reset()
    }
    let zoomIn = () => {
        store.emberbox?.zoomIn()
    }
    let zoomOut = () => {
        store.emberbox?.zoomOut()
    }
    return (
        <>
            <div className='absolute top-6 left-4'>
                {/* 返回 */}
                <div className='_icons   rounded-full shadow-lg flex justify-center items-center'>
                    <Image alt='left' src='svgs/left.svg' width={25} height={25} className='' />
                </div>
                {/* 指南针 */}
                <div className='north _icons  mt-[5.33rem] rounded-full'>
                    <img src="/icons/north.png" alt="" className='w-full h-full' />
                </div>

                {/* 楼层 */}
                <div className='w-[2.67rem] h-[11.83rem] mt-[1.33rem] rounded-[1.33rem] bg-[#0000aa] overflow-hidden'>
                    <div className=' w-[2.67rem] h-[2.67rem]  shadow-xl   rounded-full'>
                        <img src="/icons/uparrow.png" alt="" className='w-full h-full' />
                    </div>
                    <div className='w-[full] h-[6.5rem] overflow-y-hidden'>
                        <SliderSelect />
                    </div>
                    <div className=' w-[2.67rem] h-[2.67rem]  shadow-xl   rounded-full'>
                        <img src="/icons/downarrow.png" alt="" className='w-full h-full' />
                    </div>
                </div>

                {/* 定位 */}
                <div className='north w-[2.67rem] h-[2.67rem] bg-[#fff] shadow-xl  mt-[1.33rem] rounded-full'>
                    <img src="/icons/location.png" onClick={resetLocation} alt="" className='w-full h-full' />
                </div>
            </div>
            <div className='absolute top-6 right-4'>
                <div className='w-[2.67rem] h-[8.83rem] rounded-[1.33rem] bg-[#0000aa] overflow-hidden flex flex-col  justify-center items-center text-white'>
                    <div >
                        <img src="/icons/export.png" className='w-[1.5rem]' alt="export" />
                        <span>出口</span>
                    </div>
                    <div className='h-[1rem]'></div>
                    <div>
                        <img src="/icons/round.png" className='w-[1.5rem]' alt="export" />
                        <span>周边</span>
                    </div>
                </div>
                <div className='north w-[2.67rem] h-[2.67rem] bg-[#fff] shadow-xl  mt-[13.75rem] rounded-full flex justify-center items-center'
                    onClick={zoomIn}
                >
                    <img src="/icons/plus.png" alt="" className='w-[1.17rem] ' />
                </div>
                <div className='north w-[2.67rem] h-[2.67rem] bg-[#fff] shadow-xl  mt-[1.33rem] rounded-full flex justify-center items-center'
                    onClick={zoomOut}
                >
                    <img src="/icons/minus.png" alt="" className='w-[1.17rem] ' />
                </div>

            </div>
        </>
    )
}

export default index